<template>
  <Layout dis-hover>
    <div :style="{width: '100%',height: divHeight, }"><!--border: '1px solid #dcdee2'-->
      <Split v-model="split1">
        <div slot="left" class="demo-split" style="height: 100%; overflow-y: auto; overflow-x: hidden; padding: 5px">
          <Tree :data="treeData" :render="renderContent" :load-data="handleLoadData" ref="tree" expand-node></Tree>
          <Dropdown trigger="click" style="margin-left:20px" placement="right-start"
                    ref="contentMenu" @on-click="selectTreeItem">
            <DropdownMenu slot="list">
              <DropdownItem name="addPoint">新增</dropdownitem>
              <DropdownItem name="editPoint">修改</dropdownitem>
              <DropdownItem name="deletePoint">删除</dropdownitem>
            </dropdownmenu>
          </dropdown>
        </div>
        <div slot="right" class="demo-split-pane">

        </div>
      </Split>
    </div>
  </Layout>
</template>

<script>

import {Api} from '@/api/index.js'
import {sessionStorage} from '@/common/cacheUtils.js';

export default {
  name: "teamInfo",
  data() {
    return {
      docName: '',
      uploadList: [],
      fileUrl: '',
      uploadImgUrl: '',
      materialsId: '',
      categoryId: '',
      isUpdate: false,
      imgFile: null,
      docFile: null,
      tableHeight: '',
      divHeight: '',
      loading: false,
      split1: 0.25,
      treeData: [
        {
          id: '-1',
          title: '班组信息',
          type: '0',
          children: [],
          _loading: false,
          _showChildren: true
        }
      ],
      modal1: false,
      isShow: false,
      showEdit: false,
      formItem: {
        name: ''
      },
      selectNodeInfo: {title: ''},
      showPoint: false,
      showPoint1: true,
      showPoint2: false,
      formInline: {},
      form1data: {},
      infos: [],
      pageSizeArray: [10, 20, 50],
      pagedata: {
        total: 0,
        pageSize: 10,
        currentPage: 1
      },
      addButten: true
    }
  },
  watch: {},
  mounted() {
    this.divHeight = window.innerHeight - 135 + 'px';
    this.tableHeight = window.innerHeight - 305;
    this.categoryId = -1;
    this.queryTree(this.treeData[0]);

  },
  methods: {
    queryTree(parent) {
      this.$http.get(Api.queryCategoryTree, {params: {parentId: parent.id, categoryType: '1'}}).then(res => {
        this.$set(parent, 'children', res.data.data);
        this.$set(parent, 'expand', true);
      }).catch(e => {
        this.$Message.error('请求失败');
      })
    },
    handleLoadData(item, callback) {
      if (item.type == '1') {
        //查询企业
        this.$http.get(Api.queryCategoryTree, {params: {parentId: item.id, categoryType: '2'}}).then(res => {
          callback(res.data.data);
        }).catch(e => {
          this.$Message.error('请求失败');
        })
      } else if (item.type == '2') {
        //查询基础信息、资料、会议
      } else if (item.type == '3') {
        //查询
      } else if (item.type == '4') {

      } else if (item.type == '5') {

      } else if (item.type == '6') {

      } else if (item.type == '7') {

      }
    },
    renderContent(h, {root, node, data}) {
      let icon = "ios-folder";
      return h('span', {
        style: {
          display: 'inline-block',
          cursor: "pointer",
          color: node.node.selected ? "#2d8cf0" : "black" //根据选中状态设置样式
        },
        on: {
          click: () => {
            //树的节点点击事件
          },
          //右键点击事件
          contextmenu: (e) => {

            //取消默认的鼠标右键点击事件
            e.preventDefault();
            this.selectNodeInfo = data;
            this.selectNode = node;
            this.selectRoot = root;
            //当前事件所对应的标签
            this.$refs.contentMenu.$refs.reference = e.target
            //控制菜单是否显示
            this.$refs.contentMenu.currentVisible = !this.$refs.contentMenu.currentVisible;
          },
        }
      }, [
        h('span', [
          h('Icon', {
            props: {
              type: icon,
            },
            style: {
              marginRight: '5px',
              color: '#FF7F00'
            }
          }),
          h('span', data.title)
        ])
      ]);
    },
    query() {
      this.loading = true;
      let data = {
        page: this.pagedata.currentPage,
        rows: this.pagedata.pageSize,
        categoryId: this.categoryId
      };
      data = Object.assign(data, JSON.parse(JSON.stringify(this.formInline)));
      this.$http.get(Api.saAuditMaterialsInfo, {
        params: data,
      }).then((res) => {
        this.infos = res.data.data;
        this.pagedata.total = res.data.totalSize;
        this.loading = false;
      }).catch(e => {
        this.$Message.error('请求失败');
      });
    },
    cancel() {
      this.formInline = {};
      this.query();
    },
    add() {
      this.isUpdate = false;
      this.materialsId = this.uuid();
      this.docFile = null
      this.docName = null
      this.uploadImgUrl = Api.uploadPTWFiles + '/' + this.materialsId + '/files/picture';
      this.fileUrl = Api.uploadPTWFiles + '/' + this.materialsId + '/files/doc';
      this.modal1 = true;
    },
    downloadFile(file) {
      this.fileUrl = Api.uploadPTWFiles + '/' + file.id + '/files/doc';
      this.$http.get(this.fileUrl, {
        params: {},
      }).then((res) => {
        if (res.data.result == "success") {
          if (res.data.data.length != 0) {
            // this.docFile = res.data.data[0];
            // this.docName = res.data.data[0].fileName;
            console.log(res.data.data[0].id)
            this.$Modal.confirm({
              title: '文件下载',
              content: '<p>是否确定下载</p>',
              okText: '确认',
              onOk: () => {
                this.$http.get(Api.uploadPTWFiles + '/file/' + res.data.data[0].id, {
                  responseType: 'blob'      //告诉服务器我们需要的响应格式
                }).then((res1) => {
                  console.log(res1)
                  const aLink = document.createElement("a");
                  let blob = new Blob([res1.data], {
                    type: res1.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
                  });
                  aLink.href = URL.createObjectURL(blob)
                  aLink.download = res.data.data[0].fileName //标题
                  aLink.click()
                  document.body.appendChild(aLink)
                })
              }
            });
          }
        }
      })


    },
    update(row) {
      this.isUpdate = true;
      this.modal1 = true;
      this.form1data = row;
      this.uploadImgUrl = Api.uploadPTWFiles + '/' + row.id + '/files/picture';
      this.fileUrl = Api.uploadPTWFiles + '/' + row.id + '/files/doc';
      this.$http.get(this.uploadImgUrl, {
        params: {},
      }).then((res) => {
        if (res.data.result == "success") {
          this.uploadList = res.data.data;
        }
      })
      this.$http.get(this.fileUrl, {
        params: {},
      }).then((res) => {
        if (res.data.result == "success") {
          if (res.data.data.length != 0) {
            this.docFile = res.data.data[0];
            this.docName = res.data.data[0].fileName;
          }
        }
      })
    },
    delete(row) {
      this.$Modal.confirm({
        title: '数据删除',
        content: '<p>确定删除该数据</p>',
        okText: '确认',
        onOk: () => {
          let data = sessionStorage('userId').getObject('userId');
          this.$http.delete(Api.saAuditMaterialsInfo, {params: {id: row.id, updateUserId: data.userId}}).then((res) => {
            this.query();
            this.$Message.success({
              content: '删除成功',
              duration: 4
            });
          }).catch(e => {
            this.$Message.error({
              content: '请求失败',
              duration: 4
            });
          });
        }
      });
    },
    handleUpload(file) {
      let self = this;
      this.imgFile = file;
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (ev) { //文件读取成功完成时触发
        self.imgBase64 = ev.target.result; //获得文件读取成功后的DataURL,也就是base64编码
      }
      return false;
    },
    handleUpload2(file) {
      if (file.name.toLowerCase().indexOf('.pdf') > 0) {
      } else {
        this.$Message.error("仅支持上传pdf,请重新选择文件")
        return false
      }
      if (this.docFile != null) {
        debugger;
        this.$http.delete(Api.uploadPTWFiles + '/' + this.form1data.id + '/files/' + this.docFile.id, {params: {}}).then((res) => {
          if (res.data.result == 'success') {
            this.docFile = file;
            this.docName = file.name;
            this.$refs.docUpload.post(this.docFile);
          }
        })
      } else {
        this.docFile = file;
        this.docName = file.name;
        this.$refs.docUpload.post(this.docFile);
      }
      return false;
    },

    //右键菜单的点击事件
    selectTreeItem(name) {
      if (name == 'addPoint') {
        this.isUpdate = false;
        this.showEdit = true;
        this.isShow = true;
        this.formItem.parentId = this.selectNodeInfo.id;
      } else if (name == 'editPoint') {
        this.isUpdate = true;
        this.showEdit = true;
        this.isShow = true;
        this.formItem = {
          id: this.selectNodeInfo.id,
          name: this.selectNodeInfo.title,
          seq: this.selectNodeInfo.seq
        }
      } else if (name == 'deletePoint') {
        this.$Modal.confirm({
          title: '数据删除',
          content: '<p>确定删除该分类</p>',
          okText: '确认',
          onOk: () => {
            let data = sessionStorage('userId').getObject('userId');
            this.$http.delete(Api.saAuditMaterialsCategory, {
              params: {
                id: this.selectNodeInfo.id,
                updateUserId: data.userId
              }
            }).then((res) => {
              const parentKey = this.selectRoot.find(el => el === this.selectNode).parent;
              const parent = this.selectRoot.find(el => el.nodeKey === parentKey).node;
              for (let i = 0; i < parent.children.length; i++) {
                if (parent.children[i].menuId == this.selectNodeInfo.menuId) {
                  console.log(parent.children[i].menuId)
                  console.log(this.selectNodeInfo.menuId)
                  parent.children.splice(i, 1);
                  this.$Message.success('删除成功');
                  this.queryTree(-1);
                  this.query();
                  return;
                }
              }
              this.queryTree(-1);
              this.query();
              this.$Message.success({
                content: '删除成功',
                duration: 4
              });
            }).catch(e => {
              this.$Message.error({
                content: '请求失败',
                duration: 4
              });
            });

          },
          cancelText: '取消'
        });
      }
    },

    uuid() {
      let s = [];
      let hexDigits = "0123456789abcdef";
      for (let i = 0; i < 32; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      let uuid = s.join("");
      return uuid
    }
  }
}
</script>

<style scoped>
@import '../../../index.css';

.demo-split-pane {
  padding: 10px;
}

.test-5::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.test-5::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
  );
}

.test-5::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;
}
</style>
